@model PostModel

@inject IStringLocalizer<Resource> _localizer

<!--
    TODO:
    List of related posts.

    Custom Fields:
    - on or off
    - Title (Related Posts)
    - How many items
 -->
@if (Model.PostSlug.Related.Any())
{
  <section class="related">
    <header class="related-header">
      <h3 class="related-header-title">
        @_localizer["related-posts"]
      </h3>
      <a class="related-header-link ms-auto" href="~/">
        @_localizer["view-all"]
        <svg width="22" height="22" class="bi bi-arrow-left">
          <use xlink:href="/_content/@ThemesStandardConstant.AssemblyName/img/icon-sprites.svg#bi-arrow-left"></use>
        </svg>
      </a>
    </header>

    <div class="row">
      @foreach (var post in Model.PostSlug.Related)
      {
        <div class="col-12 col-md mb-4 mb-md-0">
          <article class="post-grid d-flex flex-column">
            <figure class="post-grid-cover" aria-hidden="true">
              <img class="post-grid-img" src="@PageHelper.CheckGetCoverrUrl(post.Cover)" alt="@post.Title">
            </figure>
            @if (post.Categories != null)
            {
              <div class="post-grid-cats">
                @foreach (var cat in post.Categories)
                {
                  <a class="post-grid-cats-link" href="~/category/@cat.Content" tabindex="-1">@cat.Content</a>
                }
              </div>
            }
            <h2 class="post-grid-title">
              <a class="post-grid-link" href="~/post/@post.Slug">@post.Title</a>
            </h2>
            <p class="post-grid-desc">
              @Html.Raw(post.Description)
             </p>
            <div class="post-grid-meta d-flex">
              <div class="post-grid-author">
                <img class="post-grid-author-img" src="@PageHelper.CheckGetAvatarUrl(post.User.Avatar)" width="16" height="16" alt="@post.User.NickName" aria-hidden="true">
                <span class="post-grid-author-name">@post.User.NickName</span>
              </div>
              <div class="post-grid-date">
                <svg width="13" height="13" class="bi bi-calendar-event post-grid-date-icon">
                  <use xlink:href="/_content/@ThemesStandardConstant.AssemblyName/img/icon-sprites.svg#bi-calendar-event"></use>
                </svg>
                <time class="post-grid-date-time">@DateTimeHelper.ToFriendlyShortDateString(post.PublishedAt)</time>
              </div>
              <a class="post-grid-more ms-auto" href="~/post/@post.Slug" tabindex="-1">
                <span>
                  @_localizer["read"]
                </span>
                <svg width="16" height="16" class="bi bi-arrow-right-short">
                  <use xlink:href="/_content/@ThemesStandardConstant.AssemblyName/img/icon-sprites.svg#bi-arrow-right-short"></use>
                </svg>
              </a>
            </div>
          </article>
        </div>
      }
    </div>

  </section>
}
